<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.导入Vue的包 -->
    <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
    <!-- 将来new的Vue实例，会控制这个元素中的所有内容 -->
    <div id="app">
        <!-- 父组件，可以在应用子组件的时候，通过属性绑定（v-bind:）的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
        <com1 v-bind:parentmsg="msg"></com1>


    </div>
    <script>
        //2.創建一個Vue的實例
        //当我们导入包之后，在浏览器内存中，就多了一个Vue 构造函数
        var vm = new Vue({
            el: '#app', //表示，当前我们的new的这个Vue实例，要控制页面上的那个区域
            data: {
                msg: '123 - 父组件中的数据'
            },
            //结论：经过演示，发现，子组件中，默认无法访问到 父组件中的data上的数据 和 methods中的方法
            components: {
                data() { //注意： 子组件中的data数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如：子组件通过ajax请求回来的数据，都可以放到data身上；
                    //data中的数据都是可读可写的
                    return {
                        title: '134',
                        contetn: '111'
                    }
                },

                com1: {
                    template: '<h1 @click="change">这是子组件 --- {{parentmsg}}</h1>',
                    //注意： 组件中的所有 props 中的数据，都是通过父组件传递给子组件的
                    //props中的数据，都是只读的，无法重新赋值
                    props: ['parentmsg'], //把父组件传递过来的parentmsg属性，先在props数组中定义一下，这样才能使用这个数据
                    methods: {
                        change() {
                            this.parentmsg = '被修改了'
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>